/*
* @Author: zhangsai
* @Date: 2018/1/17
* @Last Modified by: zhangsai
* @Last Modified time: 2018/1/17
* @description: 编辑文件
*/
<template>
    <div>
        <el-button type="primary" @click="dialogEditFileVisible = true">编辑目录</el-button>
        <!--修改文件-->
        <el-dialog title="修改文件夹名称" :visible.sync="dialogEditFileVisible" width="300px" append-to-body>
            <el-row>
                <el-col :span="24">
                    <table class="ca-table">
                        <tr>
                            <th width="90%">文件夹名称</th>
                            <th id="managerAdd" class="p-tb-0">
                                <button @click="addFolder()" type="button" class="ca-btn ca-btn-round"><i class="fa fa-plus"></i></button>
                            </th>
                        </tr>
                        <tr v-for="(item,index) in fileChildTypeList">
                            <td><el-input type="text" v-model="item.cnName"></el-input></td>
                            <td width="5%" class="p-tb-0">
                                <button @click="delFolder(index, item.id)" type="button" class="ca-btn ca-btn-round"><i class="fa fa-times"></i></button>
                            </td>
                        </tr>
                    </table>
                </el-col>
            </el-row>

            <div slot="footer" class="dialog-footer ca-align-center">
                <el-button type="primary" @click="submitFolder()">确 定</el-button>
                <el-button @click="dialogEditFileVisible = false">取 消</el-button>
            </div>
        </el-dialog>
        <!--修改文件名称-->
    </div>
</template>

<script type="text/ecmascript-6">
    import { api } from './api';
    import { STATUS_HTTP_SUCCESS, apiHttp } from '__service/csHttp';
    const FILE_ITEM = {
        cnName: '',
        id: '',
        parentType: '',
    };
    export default {
        data() {
            return {
                dialogEditFileVisible: false,
                fileChildTypeList: [],

            }
        },
        watch: {},
        props: {
            // 文件类型
            fileType: {
                type: String,
                default() {
                    return '';
                }
            },
        },
        mounted() {
            this.getFileChildType()
        },
        methods: {
            // 获取文件夹列表
            async getFileChildType() {
                let params = {
                    parentType: this.fileType
                };
                let resData = await apiHttp(api.GET_FILE_CHILD_LIST, params);
                if (resData.resCode === STATUS_HTTP_SUCCESS) {
                    this.fileChildTypeList = resData.data || [];
                }
            },
            // 添加fileName
            addFolder() {
                let newFolder = Object.assign({}, FILE_ITEM, {parentType: this.fileType});
                this.fileChildTypeList.push(newFolder);
            },
            // 删除fileName
            async delFolder(index, id) {
                if (!id) {
                    this.fileChildTypeList.splice(index, 1);
                } else {
                    let params = {
                        id: id
                    }
                    let resData = await apiHttp(api.DELETE_FOLDER, params);
                    if (resData.resCode === STATUS_HTTP_SUCCESS) {
                        this.$message.success('删除成功');
                        this.getFileChildType();
                        this.$emit('uploadFileChildType');
                    }
                }
            },
            // 更新fileName
            async submitFolder() {
                let isNull = this.fileChildTypeList.filter(x => x.cnName.length === 0 );
                if (isNull.length) {
                    this.$message.warning('文件名不能为空');
                    return;
                }
                let params = {
                    fileFloderList: this.fileChildTypeList
                };
                let resData = await apiHttp(api.ADD_FOLDER, params);
                if (resData.resCode === STATUS_HTTP_SUCCESS) {
                    this.$message.success('操作成功');
                    this.getFileChildType();
                    this.dialogEditFileVisible = false;
                    this.$emit('uploadFileChildType');
                }
            }

        },
        components: {

        },
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>

</style>
